Skip to content

fix(typed effect): allow fade effect with reduced motion (@d1rshan)#7849

Open
d1rshan wants to merge 3 commits intomonkeytypegame:masterfrom
d1rshan:fix/typed-effects-pref-reduced
Open

fix(typed effect): allow fade effect with reduced motion (@d1rshan)#7849
d1rshan wants to merge 3 commits intomonkeytypegame:masterfrom
d1rshan:fix/typed-effects-pref-reduced

Conversation

@d1rshan
Copy link
Copy Markdown
Contributor

@d1rshan d1rshan commented Apr 18, 2026

Current Behavior for Reduced Motion

  1. keep - Letters stay (No change)
  2. hide - Letters vanish instantly (No change)
  3. fade - Letters stay (Effect is lost)
  4. dots - Letters become dots instantly (has a Fallback)

Changes

This PR makes sure that fade effect works for reduced motion by adding it to the global exclude list for reduced motion.

Closes #7847

@monkeytypegeorge monkeytypegeorge added the frontend User interface or web stuff label Apr 18, 2026
@d1rshan d1rshan changed the title fix: fade effect fallback for reduced motion fix(typed effect): add fade effect fallback for reduced motion (@d1rshan) Apr 18, 2026
@fehmer
Copy link
Copy Markdown
Member

fehmer commented Apr 18, 2026

I think fade should fade even with reduced motion applied.
Selecting fade is a user choice and it is okay to override reduced motion.

@d1rshan
Copy link
Copy Markdown
Contributor Author

d1rshan commented Apr 18, 2026

makes sense, i misunderstood it. will update this pr accordingly

@d1rshan d1rshan changed the title fix(typed effect): add fade effect fallback for reduced motion (@d1rshan) fix(typed effect): ignore reduced motion for user-selected effects (@d1rshan) Apr 19, 2026
@fehmer
Copy link
Copy Markdown
Member

fehmer commented Apr 19, 2026

hi @d1rshan,

please revert the changes for the dots effect. Just replace with dots without the animation is fine for reduced-motion.

Can this be fixed by adding the.typed-effect-fade to the exclude list for reduced motion

*:not(.fa-spin, .animate-\[loader\], .preloader) {
?

@d1rshan
Copy link
Copy Markdown
Contributor Author

d1rshan commented Apr 19, 2026

hey @fehmer, i reverted the changes for dots effect and yes adding fade effect class to exclude list also works, so i did that too.

also can i get clarification regarding what behavior should this new typed effect #7793 follow (for reduced motion) ? - currently i updated it so that it behaves the same on reduced motion by adding to exclude list.

@d1rshan d1rshan changed the title fix(typed effect): ignore reduced motion for user-selected effects (@d1rshan) fix(typed effect): allow fade effect with reduced motion (@d1rshan) Apr 19, 2026
@fehmer
Copy link
Copy Markdown
Member

fehmer commented Apr 19, 2026

also can i get clarification regarding what behavior should this new typed effect #7793 follow (for reduced motion) ? - currently i updated it so that it behaves the same on reduced motion by adding to exclude list.

Should be fine, the tumble effect does not make sense without any motion.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

frontend User interface or web stuff

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Don't apply reduced motion to typed effects

3 participants